<!DOCTYPE html>
<html lang="en">
<head>
    <title>车险理赔--赔付记录</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">
    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>
</head>
<body>
<script src="/js/webSocket.js"></script>
<section id="container">
<#include "sider.ftl">
    <section id="main-content">
        <section class="wrapper">
            <div class="table-agile-info" id="app">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        赔付记录
                    </div>
                    <div id="dataDiv">
                        <form class="form-inline bg-warning" role="form">
                            查询条件：
                            <div class="form-group">
                                <label class="sr-only" for="keyword">关键词:</label>
                                <input type="text" class="form-control" id="keyword" name="keyword" placeholder="关键词" style="width: 200px">
                            </div>
                            <button type="button" id="findPayBackRecord" class="btn btn-success">查询</button>
                            <button type="button" id="exportData" class="btn btn-success" value="导出数据"
                                    onclick="exportProduct()">导出数据
                            </button>
                        </form>
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                <tr class="success">
                                    <td>序号</td>
                                    <td>赔偿编号</td>
                                    <td>案件编号</td>
                                    <td>保单编号</td>
                                    <td>客户姓名</td>
                                    <td>身份证号</td>
                                    <td>联系方式</td>
                                    <td>车牌号</td>
                                    <td>银行卡号</td>
                                    <td>赔付金额</td>
                                    <td>赔付日期</td>
                                    <td>审陪员工</td>
                                    <td>赔付状态</td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr class="active" v-for="(item,index) in result">
                                    <td>{{index+1}}</td>
                                    <td>{{item.paySerial}}</td>
                                    <td>{{item.cases.caseId}}</td>
                                    <td>{{item.cases.order.oid}}</td>
                                    <td>{{item.payName}}</td>
                                    <td>{{item.userCardId}}</td>
                                    <td>{{item.userPhone}}</td>
                                    <td>{{item.licenseNum}}</td>
                                    <td>{{item.creditCard}}</td>
                                    <td>{{item.payMoney}}</td>
                                    <td>{{item.payDate}}</td>
                                    <td>{{item.emp.empName}}</td>
                                    <td>
                                        <span v-if="item.payStatus==1" style="color: green">已结算</span>
                                    </td>
                                </tr>
                                </tbody>
                                <tr>
                                    <td colspan="5">
                                        <div id="page"></div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
        </section>
       <#include "foot.ftl"><#--引入底部-->
    </section>
</section>
</body>
</html>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            result: []
        }
    });
    var getIsPayCaseList = function (curr) {
        $.ajax({
            url: "/payBack/queryIsPayRecord",
            type: "POST",
            data: {
                pageNum: curr || 1,
                pageSize: 3,
                keyword: $("#keyword").val()
            },
            success: function (data) {
                app.result = data.list;
                if (app.result.length == 0) {
                    $("#dataDiv").css("display", "none");
                    $("#app").find("p").remove();
                    $("#app").append("<p align='center' style='color: red'><font size='6px'>尚未有赔付记录</font></p>");
                    return;
                }
                laypage({
                    cont: "page",
                    pages: data.pages,
                    skin: "#00FFFF",
                    group: 3,
                    first: '首页',
                    last: '尾页',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getIsPayCaseList(obj.curr);
                        }
                    }
                });
            }
        });

    };
    getIsPayCaseList();

    $("#findPayBackRecord").on("click", function () {
        getIsPayCaseList();
    });

    function exportProduct() {
        window.location.href = "/excel/export";
    }
</script>